<template>
    <view class="w-screen h-screen flex flex-col" :style="themeColor()">
        <view class="flex-1">
            <!-- #ifdef H5 -->
            <view class="h-[100rpx]"></view>
            <!-- #endif -->
            <view class="px-[60rpx] pt-[180rpx] mb-[100rpx] flex position_fu">
                <img src="@/image/login/logo.png" alt="" class="h-[346rpx] w-[379rpx] logo_cl"/>
                <view class="text-[48rpx] position_zhao text-[#fff]">
                  {{ t('findPassword') }}<text class="text-[#B13F3F]">{{ t('findPasswords') }}</text>
                </view>
            </view>

            <view class="px-[60rpx] mt-[160rpx]">
                <u-form labelPosition="left" :model="formData" errorType='toast' :rules="rules" ref="formRef">
                    <view class="mt-[30rpx]">
                        <u-form-item label="" prop="mobile" :border-bottom="false">
                          <img src="@/image/login/input_l.png" alt="" class="h-[108rpx] w-[33rpx]"/>
                            <u-input v-model="formData.mobile" border="none" clearable :placeholder="t('mobilePlaceholder')" class="!bg-transparent" :disabled="real_name_input" fontSize="26rpx" placeholderClass="!text-[#999999]"/>
                          <img src="@/image/login/input_r.png" alt="" class="h-[108rpx] w-[33rpx]"/>
                        </u-form-item>
                    </view>
                    <view class="mt-[30rpx]">
                        <u-form-item label="" prop="code" :border-bottom="false">
                          <img src="@/image/login/input_l.png" alt="" class="h-[108rpx] w-[33rpx]"/>
                            <u-input v-model="formData.mobile_code" border="none" clearable :placeholder="t('codePlaceholder')" class="!bg-transparent" :disabled="real_name_input" fontSize="26rpx" placeholderClass="!text-[#999999]">
                                <template #suffix>
                                    <sms-code :mobile="formData.mobile" type="find_pass" v-model="formData.mobile_key"></sms-code>
                                </template>
                            </u-input>
                          <img src="@/image/login/input_r.png" alt="" class="h-[108rpx] w-[33rpx]"/>
                        </u-form-item>
                    </view>
                    <view class="mt-[30rpx]">
                        <u-form-item label="" prop="password" :border-bottom="false">
                          <img src="@/image/login/input_l.png" alt="" class="h-[108rpx] w-[33rpx]"/>
                            <u-input v-model="formData.password" border="none" type="password" clearable :placeholder="t('passwordPlaceholder')" class="!bg-transparent" :disabled="real_name_input" fontSize="26rpx" placeholderClass="!text-[#999999]"/>
                          <img src="@/image/login/input_r.png" alt="" class="h-[108rpx] w-[33rpx]"/>
                        </u-form-item>
                    </view>
                    <view class="mt-[30rpx]">
                        <u-form-item label="" prop="confirm_password" :border-bottom="false">
                          <img src="@/image/login/input_l.png" alt="" class="h-[108rpx] w-[33rpx]"/>
                            <u-input v-model="formData.confirm_password" border="none" type="password" clearable :placeholder="t('confirmPasswordPlaceholder')" class="!bg-transparent" :disabled="real_name_input" fontSize="26rpx" placeholderClass="!text-[#999999]"/>
                          <img src="@/image/login/input_r.png" alt="" class="h-[108rpx] w-[33rpx]"/>
                        </u-form-item>
                    </view>
                    <view class="mt-[80rpx]">
                        <button hover-class="none" class="bg-[var(--primary-color)] text-[#fff] h-[80rpx] leading-[80rpx] text-[28rpx]" :loading="loading" :loadingText="t('confirm')" @click="handleConfirm">{{t('confirm')}}</button>
                    </view>
                </u-form>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
    import { ref, reactive, onMounted } from 'vue'
    import { t } from '@/locale'
    import { resetPassword } from '@/app/api/system'
    import { redirect } from '@/utils/common'

    const formData = reactive({
        mobile: '',
        mobile_code: '',
        mobile_key: '',
        password: '',
        confirm_password: ''
    })

	const real_name_input = ref(true);
	onMounted(() => {
		// 防止浏览器自动填充
		setTimeout(()=>{
			real_name_input.value = false;
		},800)
	});

    const loading = ref(false)
    const formRef = ref(null)

    const rules = {
        'password': {
            type: 'string',
            required: true,
            message: t('passwordPlaceholder'),
            trigger: ['blur', 'change']
        },
        'confirm_password': [
            {
                type: 'string',
                required: true,
                message: t('confirmPasswordPlaceholder'),
                trigger: ['blur', 'change']
            },
            {
                validator(rule, value) {
                    return value == formData.password
                },
                message: t('confirmPasswordError'),
                trigger: ['change', 'blur'],
            }
        ],
        'mobile': [
            {
                type: 'string',
                required: true,
                message: t('mobilePlaceholder'),
                trigger: ['blur', 'change'],
            },
            {
                validator(rule, value) {
                    return uni.$u.test.mobile(value)
                },
                message: t('mobileError'),
                trigger: ['change', 'blur'],
            }
        ],
        'mobile_code': {
            type: 'string',
            required: true,
            message: t('codePlaceholder'),
            trigger: ['blur', 'change']
        }
    }

    const handleConfirm = () => {
        formRef.value.validate().then(() => {
            if (loading.value) return
            loading.value = true

            resetPassword(formData).then((res : responseResult) => {
                redirect({ url: '/app/pages/auth/login', mode: 'redirectTo' })
            }).catch(() => {
                loading.value = false
            })
        })
    }
</script>

<style lang="scss" scoped>
::v-deep {
  uni-page-head {
    height: 0 !important;
  }

  .uni-page-head {
    background-color: transparent !important;
  }

  .uni-page-head-bd {
    display: none;
  }

  .uni-page-head-hd path {
    fill: #FFFFFF !important;
  }
}
	.u-input{
		background-color: transparent !important;
	}
  uni-page-body {
    background-color: #0C0C16;
    background-image: url('../../../image/login/login_bg.png');
    background-repeat: no-repeat;
    background-size:100%;
  }
  .u-form-item {
    background: rgba(47, 47, 47, .7);
    box-shadow: 0rpx 2rpx 24rpx 0rpx rgba(0,0,0,0.42);
    border-radius: 4rpx;
    color: #999999;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 34rpx;
  }
  :deep(.uni-input-input) {
    color: #FFFFFF;
  }
  :deep(.u-form-item__body) {
    padding: 0 !important;
  }
  .logo_cl {
    position: absolute;
    top: 24rpx;
    left: -30rpx;
  }
  .position_fu {
    position: relative;
  }
  .position_zhao {
    position: absolute;
    left: 220rpx;
    top: 200rpx;
  }
</style>
